Coding Schools

How to add CSS in HTML
Types of CSS Files
Flex in CSS
Media Query in CSS
CSS - background attribute
CSS - border
css - border-image
CSS align attributes
CSS color attribute
CSS cursor attribute
CSS display attribute
CSS font attributes
CSS height and max-height
CSS width and max-width
CSS padding attributes
CSS margin attributes
CSS mask attributes
CSS overflow attributes
CSS opacity attribute
CSS text decoration attributes
CSS visibility attribute
CSS word attributes
CSS z-index attribute

CSS text decoration attributes

The text-decoration property in CSS is used to add decorative lines to text, such as underlines, overlines, or line-throughs. Here are the key text-decoration attributes:

1. `text-decoration-line`

Specifies the type of text decoration line to use:

css

.element {
    text-decoration-line: underline;     /* Underlines the text */
    text-decoration-line: overline;      /* Overlines the text */
    text-decoration-line: line-through;  /* Adds a line through the text */
    text-decoration-line: none;          /* Removes any text decoration */
}

2. `text-decoration-color`

Sets the color of the text decoration:

css

.element {
    text-decoration-color: red;          /* Sets the decoration color to red */
    text-decoration-color: #00ff00;      /* Sets the decoration color using a hex value */
}

3. `text-decoration-style`

Specifies the style of the text decoration line:

css

.element {
    text-decoration-style: solid;        /* Solid line (default) */
    text-decoration-style: double;       /* Double line */
    text-decoration-style: dotted;       /* Dotted line */
    text-decoration-style: dashed;       /* Dashed line */
    text-decoration-style: wavy;         /* Wavy line */
}

4. `text-decoration-thickness`

Controls the thickness of the text decoration line:

css

.element {
    text-decoration-thickness: 2px;     /* Sets the thickness to 2 pixels */
    text-decoration-thickness: thick;   /* Sets the thickness to "thick" */
}

5. `text-decoration`

A shorthand property that combines the line, color, and style attributes:

css

.element {
    text-decoration: underline red wavy;  /* Underline, red color, wavy style */
}

Example

Here is an example that uses multiple text decoration properties:

css

.element {
    text-decoration-line: underline;
    text-decoration-color: blue;
    text-decoration-style: dashed;
    text-decoration-thickness: 2px;
}

By using these properties, you can create various decorative effects on your text. Let me know if you need more details or specific examples!

Coding Schools

CSS text decoration attributes

1. text-decoration-line

2. text-decoration-color

3. text-decoration-style